﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="../Content/ui/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="../Content/main.css" />
    <link rel="stylesheet" type="text/css" href="../Content/app.css" />
    <link rel="stylesheet" type="text/css" href="../Content/slick.grid.css" />
    <link rel="stylesheet" type="text/css" href="../Content/flowchart.css" />
    <style type="text/css">
        #kgraphContainer {
            padding: 20px;
            width: 80%;
            height: 400px;
            border: 1px solid gray;
        }
    </style>
    <script src="../js/base.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/jquery-2.0.2.js"></script>

    <script type="text/javascript" src="../js/jquery-ui-1.10.3.min.js"></script>
    <script type="text/javascript" src="../js/jquery.layout-latest.min.js"></script>
    <script type="text/javascript" src="../js/jquery.event.drag-2.2.js"></script>
    <script type="text/javascript" src="../js/jquery.dialogextend.1_0_1.js"></script>

    <script type="text/javascript" src="../js/jsplumb/jsBezier-0.7.js"></script>
    <!-- event adapter -->
    <script type="text/javascript" src="../js/jsplumb/mottle-0.6.js"></script>
    <!-- geom functions -->
    <script type="text/javascript" src="../js/jsplumb/biltong-0.2.js"></script>

    <!-- jsplumb util -->
    <script type="text/javascript" src="../js/jsplumb/util.js"></script>
    <script type="text/javascript" src="../js/jsplumb/browser-util.js"></script>
    <!-- main jsplumb engine -->
    <script type="text/javascript" src="../js/jsplumb/jsPlumb.js"></script>

    <!-- base DOM adapter -->
    <script type="text/javascript" src="../js/jsplumb/dom-adapter.js"></script>
    <script type="text/javascript" src="../js/jsplumb/overlay-component.js"></script>
    <!-- endpoint -->
    <script type="text/javascript" src="../js/jsplumb/endpoint.js"></script>
    <!-- connection -->
    <script type="text/javascript" src="../js/jsplumb/connection.js"></script>
    <!-- anchors -->
    <script type="text/javascript" src="../js/jsplumb/anchors.js"></script>
    <!-- connectors, endpoint and overlays  -->
    <script type="text/javascript" src="../js/jsplumb/defaults.js"></script>

    <!-- bezier connectors -->
    <script type="text/javascript" src="../js/jsplumb/connectors-bezier.js"></script>
    <!-- state machine connectors -->
    <script type="text/javascript" src="../js/jsplumb/connectors-statemachine.js"></script>
    <!-- flowchart connectors -->
    <script type="text/javascript" src="../js/jsplumb/connectors-flowchart.js"></script>
    <script type="text/javascript" src="../js/jsplumb/connector-editors.js"></script>

    <!-- SVG renderer -->
    <script type="text/javascript" src="../js/jsplumb/renderers-svg.js"></script>
    <!-- vml renderer -->
    <script type="text/javascript" src="../js/jsplumb/renderers-vml.js"></script>
    <!-- common adapter -->
    <script type="text/javascript" src="../js/jsplumb/base-library-adapter.js"></script>


    <!-- jquery jsPlumb adapter -->
    <script type="text/javascript" src="../js/jsplumb/jquery.jsPlumb.js"></script>

    <script type="text/javascript" src="../js/jshelper.js"></script>
    <script type="text/javascript" src="../js/XMLWriter-1.0.0-min.js"></script>

    <!-- jquery kmain files -->

    <script type="text/javascript" src="../AppJS/kgraph2.min.js"></script>
    <script type="text/javascript" src="../AppJS/processFileManager.js"></script>

    <title>流程图</title>
    <script type="text/javascript">
        jsPlumb.ready(function () {
            loadProcess2();
        })

        function lineArrow() {
            var common = {
                connector: ["Straight"],
                anchor: ["Left", "Right"],
                //endpoint: "Dot"
            };
            jsPlumb.connect({
                source: "item_left",
                target: "item_right",
                paintStyle: { strokeStyle: "lightgray", lineWidth: 3 },
                endpointStyle: { fillStyle: "lightgray", outlineColor: "gray" },
                overlays: [
                    ["Arrow", { width: 12, length: 12, location: 0.67 }]
                ]
            }, common)
        }

        function endPoint() {
            jsPlumb.setContainer("diagramContainer");

            var commonStyle = {
                endpoint: ["Dot", { radius: 3 }],
                hoverPaintStyle: { fillStyle: "lightblue" },
                paintStyle: {
                    strokeStyle: "rgb(0,32,80)",
                    fillStyle: "rgb(0,32,80)",
                    opacity: 0.5,
                    radius: 2,
                    lineWidth: 2
                },
                connectorStyle: {
                    lineWidth: 4,
                    strokeStyle: "rgb(0,32,80)",
                    joinstyle: "round",
                    outlineColor: "rgb(251,251,251)",
                    outlineWidth: 2

                },
                connectorHoverStyle: {
                    lineWidth: 4,
                    strokeStyle: "#216477",
                    outlineWidth: 0,
                    outlineColor: "rgb(251,251,251)"
                },
                isSource: true,
                isTarget: true,
                //connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],  //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]
                connector: ["Bezier", { curviness: 100 }],
                maxConnections: -1,
                connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1 }]]
            };

            jsPlumb.addEndpoint("item_left", {
                anchors: ["Right"]
            }, commonStyle)

            jsPlumb.addEndpoint("item_right", {
                anchors: ["Left"]
            }, commonStyle)

            jsPlumb.addEndpoint("item_right", {
                anchors: ["Right"]
            }, commonStyle)
        }

        function endPointStyle() {
            jsPlumb.setContainer("diagramContainer");
            var commonStyle = {
                endpoint: ["Dot", { radius: 3 }],
                hoverPaintStyle: { fillStyle: "lightblue" },
                paintStyle: {
                    strokeStyle: "rgb(0,32,80)",
                    fillStyle: "rgb(0,32,80)",
                    opacity: 0.5,
                    radius: 2,
                    lineWidth: 2
                },
                connectorStyle: {
                    lineWidth: 4,
                    strokeStyle: "rgb(0,32,80)",
                    joinstyle: "round",
                    outlineColor: "rgb(251,251,251)",
                    outlineWidth: 2

                },
                connectorHoverStyle: {
                    lineWidth: 4,
                    strokeStyle: "#216477",
                    outlineWidth: 0,
                    outlineColor: "rgb(251,251,251)"
                },
                isSource: true,
                isTarget: true,
                //connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],  //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]
                connector: ["Bezier", { curviness: 100 }],
                maxConnections: -1,
                connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1 }]]
            };

            jsPlumb.addEndpoint("item_left", {
                anchors: ["Right"]
            }, commonStyle)

            jsPlumb.addEndpoint("item_right", {
                anchors: ["Left"]
            }, commonStyle)

            jsPlumb.addEndpoint("item_right", {
                anchors: ["Right"]
            }, commonStyle)

            jsPlumb.draggable("item_left");
            jsPlumb.draggable("item_right");
        }

        var loadProcess2 = function () {
            var query = {
                //  processGUID: "072af8c3-482a-4b1c-890b-685ce2fcc75d",
                //  processVersion: "1"
            };
            //load process xml file
            processFileManager.queryProcessFile(query, function (result) {
                if (result.Status == 1) {
                    var processFileEntity = result.Entity;
                    kmain.mgraphView = kloader.initialize(processFileEntity);
                    kmain.mcurrentPackageData = kmain.mgraphView.packageData;
                } else {
                    alert(result.Message);
                }
            });
        }
    </script>
</head>
<body>
    <div id="kgraphContainer">
    </div>
</body>
</html>
